<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>智能装备</el-breadcrumb-item>
				<el-breadcrumb-item>客户管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<tableForm :title="'客户管理'" :pageData="pageData" :data="data"
					addGo="/IntelligentEquipment/working/customerAdd">
					<template slot="g" slot-scope="scope">
						<el-button type="text" size=" " @click="check(scope.row.row)">查看</el-button>
						<el-button type="text" size=" " class="isdelete" @click="modify(scope.row.row)">修改</el-button>
						<!-- <el-button type="text" size=" " style="color:black" @click="refuse(scope.row)">拒绝</el-button> -->
					</template>
					<template slot="colorRail" v-cloak slot-scope="scope">
						<div class="colorbopx" :style="{'border-color': scope.row.row.colorRail}"></div>
					</template>
					<template slot="state" slot-scope="scope">
						<!-- 0=供应商邀请，1=设计中，2=完成，3=运行中，4=邀请供应商 -->
						{{ scope.row.row.state=='INVITECUSTOMERS'?'客户邀请'
						:scope.row.row.state==1?'邀请客户'
						:scope.row.row.state==2?'设计中'
						:scope.row.row.state==3?'设计完成':'' }}
					</template>
					<template slot="serviceName" slot-scope="scope">
						<div v-if="scope.row.row.serviceName.length > 0">
							<div class="serviceName" v-for="(item, index) in scope.row.row.serviceName" :key="index" v-show="index < 3">{{ item.supplier_services }}</div>
						</div>
						<span v-else>暂无</span>
						<!-- {{ scope.row.row.state==0?'供应商邀请':scope.row.row.state==1?'设计中':scope.row.row.state==2?'完成':scope.row.row.state==3?'运行中':'邀请供应商' }} -->
					</template>
					<template slot="operation" slot-scope="scope">
						<div class="btnBox" >
							<span style="color:#23B14D;">查看</span>
						</div>
						<!-- <div class="btnBox" >
							<span style="color:#909399;" v-if="scope.row.row.state == 0">查看</span>
							<span style="color:#67C23A;" v-if="scope.row.row.state == 0">接受</span>
							<span style="color:#E6A23C;" v-if="scope.row.row.state == 0">拒绝</span>
							<span style="color:#409EFF;" v-if="scope.row.row.state != 0 ">编辑</span>
							<span style="color:#67C23A;" v-if="scope.row.row.state == 3">提交</span>
							<span style="color:#F56C6C;" v-if="scope.row.row.state != 3">删除</span>
						</div> -->
					</template>
				</tableForm>
			</div>

		</div>
	</div>
</template>

<script>
	import tableForm from '@/components/tableForm.vue'
	export default {
		components: {
			tableForm
		},
		data() {
			return {
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				userId: '',
				pageData: {
					items: [
						// {createDate:'08.16', companyName:'重庆三峡农夫科技有限公司', baseName:'测试基地', baseLocation:'重庆市', equipmentName:'数字基地', serviceName:'三维建模', state:'0'},
						// {createDate:'08.16', companyName:'重庆三峡农夫科技有限公司', baseName:'测试基地', baseLocation:'重庆市', equipmentName:'数字基地', serviceName:'三维建模', state:'1'},
						// {createDate:'08.16', companyName:'重庆三峡农夫科技有限公司', baseName:'测试基地', baseLocation:'重庆市', equipmentName:'数字基地', serviceName:'三维建模', state:'2'},
						// {createDate:'08.16', companyName:'重庆三峡农夫科技有限公司', baseName:'测试基地', baseLocation:'重庆市', equipmentName:'数字基地', serviceName:'三维建模', state:'3'},
					]
				},
				data: [{
						type: 'text',
						prop: 'gmtCreate',
						label: '时间'
					},
					{
						type: 'text',
						prop: 'projectName',
						label: '项目名称'
					},
					{
						type: 'text',
						prop: 'companyName',
						label: '客户名称'
					},
					{
						type: 'text',
						prop: 'baseName',
						label: '客户基地'
					},
					{
						type: 'text',
						prop: 'equipmentName',
						label: '装备名称'
					},
					{
						type: 'text',
						prop: 'functionalName',
						label: '功能模块'
					},
					{
						type: 'text',
						prop: 'userName',
						label: '设计师'
					},
					{
						type: 'slot',
						prop: 'state',
						label: '进展'
					},
					{
						type: 'slot',
						prop: 'operation',
						label: '操作',
						width:'140px'
					},
				],
				pageNum: 1
			}
		},
		created() {
			this.$store.commit('digitalOrchard_leftNavIndex', 12)
			this.getPageData()
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id

			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId
			
		},
		watch: {


		},
		methods: {
			getPageData(){
				this.$request.get(this.$api.getCustomerManagementList, {
					equipCompanyId: this.companyId,
					page: this.pageNum,
					pageSize: $globalData.pageSize
				}).then(res=>{
					if(res.code == 200){
						this.pageData.items = res.data.items
						console.log(res.data)
					}
				})
			},
			
			
			
			
			check(e) {
				// console.log('check');
				console.log(e)
                // return
				let url = `/IntelligentEquipment/working/customerAdd?id=${e.id}&check=true`
				this.$router.push(url)
			},
			modify(e) {
				// console.log(e);
				let url = `/IntelligentEquipment/working/customerAdd?id=${e.id}`
				this.$router.push(url)
			},
			refuse(e) {
				console.log('refuse');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btnBox{
		span{
			cursor: pointer;
			margin-right: 5px;
		}
	}
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.isdelete {
		color: #F42929;
	}
	.colorbopx{
		width: 40px;
		height: 20px;
		border: 1px solid;
		position: relative;
		left: 50%;
		margin-left: -20px;
	}
	/* .serviceName{
		padding-right: 10px;
		position: relative;
	} */
	/* .serviceName::after{
		content: '、';
		position: absolute;
		right: 0;
	} */
</style>
